<!-- 逻辑分组 -->
<template>
    <div class="main-conent main-conent-minheight">
        <div class="main-header">
            <el-row class="btn-bottom">
                <el-col :span="8">
                    <el-button type="primary" @click="submit()">保存配置</el-button>
                </el-col>
            </el-row>
            <!-- table列表 -->
            <div class="title" style="margin-bottom:10px;">通用协议
                <el-tooltip class="item" effect="dark" content="设备通过对镜像口流量进行分析，对勾选的通用协议进行深度协议分析，为审计策略和关联策略提供基础数据"
                    placement="top-start"><i class="el-icon-warning-outline"></i></el-tooltip>
            </div>
            <el-table stripe border ref="connList" :data="connList" @selection-change="connListChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="80" type="index"></el-table-column>
                <el-table-column prop="Service" label="协议名称" width="180"></el-table-column>
                <el-table-column prop="Port" label="端口号" width="180"></el-table-column>
                <el-table-column prop="Descp" label="备注" show-overflow-tooltip></el-table-column>
                <template slot="empty">
                    <div class="empty">
                        <svg-icon icon-class="notAvailable" class="notAvailable"></svg-icon>
                    </div>
                </template>
            </el-table>
            <div class="title" style="margin-bottom:10px;margin-top:10px;">工业协议
                <el-tooltip class="item" effect="dark" content="设备通过对镜像口流量进行分析，对勾选的工业协议进行深度协议分析，为审计策略和关联策略提供基础数据"
                    placement="top-start"><i class="el-icon-warning-outline"></i></el-tooltip>
            </div>
            <el-table stripe border ref="industryList" :data="industryList" @selection-change="industryListChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="80" type="index"></el-table-column>
                <el-table-column prop="Service" label="协议名称" width="180"></el-table-column>
                <el-table-column prop="Port" label="端口号" width="180"></el-table-column>
                <el-table-column prop="Descp" label="备注" show-overflow-tooltip></el-table-column>
                <template slot="empty">
                    <div class="empty">
                        <svg-icon icon-class="notAvailable" class="notAvailable"></svg-icon>
                    </div>
                </template>
            </el-table>
        </div>
    </div>
</template>

<script>
import { connrequest } from '@/api/firstPage';
export default {
    data() {
        return {
            // nodeData: [],
            AllData: [],
            connList: [],
            industryList: [],
            ChoseConnList: [],
            ChoseIndustryList: [],
            // checkedKeys: false,
        }
    },
    created() {
        this.getData();
    },
    mounted() { },
    methods: {
        // 保存协议
        async submit() {
            let AllChoseList = this.ChoseConnList.concat(this.ChoseIndustryList)
            this.AllData.map(item => {
                // 检查当前元素是否存在于AllChoseList数组中
                const existsInSubset = AllChoseList.some(subsetItem => subsetItem.Service === item.Service);
                item.Switch = existsInSubset;
            })
            const data = {
                Data: this.AllData
            }
            const res = await connrequest('EditAppprotoList', data);
            if (res.Status.StatusCode === 0) {
                this.getData();
                this.$message.success("保存成功");
                this.centerDialogVisible = false;
            }
        },

        // 获取列表信息
        async getData() {
            this.AllData = [];
            const res = await connrequest('GetAppprotoList');
            if (res.Status.StatusCode === 0) {
                this.AllData = res.Data   //先把所有数据存下来
                let connList = res.Data.filter(item => item.ProtoType === 1)
                let industryList = res.Data.filter(item => item.ProtoType === 2)
                this.connList = connList
                this.industryList = industryList
                // 根据Switch值用toggleRowSelection方法默认勾选
                this.$nextTick(() => {
                    connList.map(row => {
                        this.$refs.connList.toggleRowSelection(row, row.Switch);
                    })
                    industryList.map(row => {
                        this.$refs.industryList.toggleRowSelection(row, row.Switch);
                    })
                })
                // this.nodeData = [
                //     {
                //         Service:'通用协议',
                //         Children: connList,
                //     },
                //     {
                //         Service:'工业协议',
                //         Children: industryList
                //     }
                // ]
                // this.$nextTick(() => {
                //     this.SelectionChange(this.nodeData)
                // })
            }
        },

        connListChange(val) {
            this.ChoseConnList = val
        },
        industryListChange(val) {
            this.ChoseIndustryList = val
        },

        // treeChange(val){
        // },
        // select(val){
        //     let Switch = val.Children.findIndex(item => item.Switch === true) === -1 ? false : true
        //     if(val.Service === '通用协议' && Switch){
        //         this.selectAll(val.Children, true)
        //     }
        // },
        // SelectionChange(data) {
        //     this.checkedKeys = false,
        //     data.forEach(row => {
        //         this.$refs.multipleTable.toggleRowSelection(row, row.Switch);
        //         if (row.Children != undefined) {
        //             this.SelectionChange(row.Children, row.Switch);
        //         }
        //     });
        // },
        // selectAll(data = this.nodeData, checkedKeys = this.checkedKeys) {
        //     this.checkedKeys = !checkedKeys;
        //     this.select(data, this.checkedKeys);
        // },
        // select(data, flag) {
        //     data.forEach((row) => {
        //         this.$refs.multipleTable.toggleRowSelection(row, flag);
        //         if (row.Children != undefined) {
        //             this.select(row.Children, this.checkedKeys);
        //         }
        //     });
        // },
    }
}
</script>

<style lang='scss' scoped> .el-icon-warning-outline {
     // color: #F56C6C;
     color: #21cb93;
     display: inline-block;
     margin-left: 5px;
     cursor: pointer;
 }

 .btn-bottom {
     margin: 0px 0 10px;
 }

 ::v-deep .el-cascader--mini {
     width: 70% !important;
 }

 ::v-deep .el-input--small {
     width: 70% !important;
 }

 ::v-deep .el-textarea {
     width: 70% !important;
 }

 ::v-deep .el-cascader .el-cascader--mini {
     width: 70% !important;
 }

 ::v-deep .el-form-item {
     margin-bottom: 10px !important;
 }

 ::v-deep .el-cascader-menu__list {
     border: none;
     background: #243244;
 }

 ::v-deep .el-popper .el-cascader__dropdown {
     border: none;
     background: #243244;
 }
</style>